<template>
  <view class="performance-page" style="background-color: #f5f9ff; min-height: 100vh;">
    <!-- 顶部导航栏 -->
    <view class="nav-bar" style="padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;">
      <view @click="goBack" style="width: 24px; height: 24px;">
        <text style="font-size: 24px;">←</text>
      </view>
      <text style="font-size: 18px; font-weight: bold;">员工业绩</text>
      <view style="width: 24px;"></view>
    </view>

    <!-- 选项卡 -->
    <view class="tabs" style="display: flex; justify-content: center; margin: 25px 15px 15px; border-bottom: 1px solid #eee;">
      <text 
        v-for="tab in tabs" 
        :key="tab.value"
        :style="activeTab === tab.value ? activeStyle : inactiveStyle"
        style="padding: 12px 25px; position: relative; font-size: 16px;"
        @click="switchTab(tab.value)"
      >
        {{ tab.label }}
        <view 
          v-if="activeTab === tab.value"
          style="position: absolute; bottom: -1px; left: 25%; width: 50%; height: 3px; background-color: #1a73e8; border-radius: 3px;"
        ></view>
      </text>
    </view>

    <!-- 员工列表 -->
    <view class="employee-list" style="margin: 0 15px 15px; background-color: #fff; border-radius: 12px; overflow: hidden;">
      <view 
        class="employee-item" 
        v-for="(employee, index) in employees" 
        :key="index" 
        @click="navigateToDetail(employee)"
        style="display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f5f5f5;"
      >
        <view style="width: 40px; height: 40px; border-radius: 20px; background-color: #eee; margin-right: 12px;"></view>
        <view style="flex: 1;">
          <text style="font-size: 16px; color: #000; display: block;">{{ employee.name }}</text>
          <text style="font-size: 12px; color: #999; display: block;">{{ employee.position }}</text>
        </view>
        <text style="font-size: 16px; color: #1a73e8; font-weight: bold; margin-right: 10px;">{{ formatNumber(employee.performance) }}</text>
        <text style="font-size: 12px; color: #999;">销售员</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'day',
      activeStyle: {
        color: '#1a73e8',
        fontWeight: 'bold'
      },
      inactiveStyle: {
        color: '#666'
      },
      tabs: [
        { label: '日榜', value: 'day' },
        { label: '月榜', value: 'month' },
        { label: '年榜', value: 'year' }
      ],
      employees: [
        { id: 1, name: '王丽丽', position: '1号收银员', performance: 23452345.00 },
        { id: 2, name: '孙佳妮', position: '2号收银员', performance: 452345.00 },
        { id: 3, name: '赵英', position: '3号收银员', performance: 152340.00 },
        { id: 4, name: '白巧乐', position: '4号收银员', performance: 52345.00 },
        { id: 5, name: '白巧乐', position: '5号收银员', performance: 345.00 },
        { id: 6, name: '王俊', position: '6号收银员', performance: 45.00 }
      ]
    }
  },
  methods: {
    navigateToDetail(employee) {
      // 添加默认交易数据
      const employeeWithTransactions = {
        ...employee,
        transactions: [
          { orderId: '87297520848', time: '2023-10-03 18:10:23', amount: 1000.00 },
          { orderId: '87297520848', time: '2023-10-03 18:10:23', amount: 1000.00 },
          { orderId: '87297520848', time: '2023-10-03 18:10:23', amount: 1000.00 },
          { orderId: '87297520848', time: '2023-10-03 18:10:22', amount: 1000.00 }
        ]
      }
      uni.navigateTo({
        url: `/pages/b/manager/01/admin_performance_detail?employee=${encodeURIComponent(JSON.stringify(employeeWithTransactions))}`
      })
    },
    switchTab(tab) {
      this.activeTab = tab
      // 这里实际项目中应该请求对应tab的数据
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    formatNumber(num) {
      return num.toFixed(2)
    }
  }
}
</script>

<style>
/* 确保iOS和Android显示一致 */
.performance-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 最后一个列表项去掉下边框 */
.employee-item:last-child {
  border-bottom: none !important;
}

/* 选项卡激活状态过渡效果 */
.tabs text {
  transition: color 0.3s ease;
}
</style>